import { FC } from 'react';
import { useSelector, useDispatch } from 'umi';

const Index: FC = () => {
  // 不管是数据还是方法，都需要加模块化
  const name = useSelector((state: any) => state.index.name);
  const grades = useSelector((state: any) => state.index.grades);
  const dispatch = useDispatch();

  // 组件里面去调用reducers和effects的方式是一样的，都是使用dispatch
  // useEffect(() => {
  //   dispatch({ type: 'index/load' });
  // }, []);

  return (
    <>
      <h2>DVA</h2>
      <p>{name}</p>
      <button onClick={() => dispatch({ type: 'index/change', name: 'lisi' })}>
        btn
      </button>

      <hr />

      <ul>
        {grades.map((item: any) => (
          <li key={item.GradeId}>{item.GradeName}</li>
        ))}
      </ul>
    </>
  );
};

export default Index;
